<div class="footer__wrap">
  <div nz-row>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        <h2>ng-alain</h2>
        <div><a href="//github.com/ng-alain/ng-alain" target="_blank">Github</a></div>
        <div><a href="//github.com/ng-alain/delon" target="_blank">@delon</a></div>
        <div><a href="//github.com/ng-alain/ng-zorro-vscode" target="_blank">ng-zorro-vscode</a></div>
        <div><a href="//github.com/ng-alain/ng-alain-vscode" target="_blank">ng-alain-vscode</a></div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        <h2>{{'app.footer.resources' | translate}}</h2>
        <div>
          <a href="//www.angular.cn/" target="_blank">Angular</a>
          <span> - </span>
          {{ 'app.footer.angular' | translate}}
        </div>
        <div>
          <a href="//ng.ant.design" target="_blank">ng-zorro-antd</a>
          <span> - </span>
          {{ 'app.footer.antd' | translate}}
        </div>
        <div>
          <a href="//cli.angular.io/" target="_blank">CLI</a>
          <span> - </span>
          {{ 'app.footer.cli' | translate}}
        </div>
        <div>
          <a href="//antv.alipay.com/" target="_blank">AntV</a>
          <span> - </span>
          {{ 'app.footer.antv' | translate}}
        </div>
        <div>
          <a href="//www.ngfans.net" target="_blank">ngfans</a>
          <span> - </span>
          {{ 'app.footer.ngfans' | translate}}
        </div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        <h2>{{'app.footer.community' | translate}}</h2>
        <div><a routerLink="/docs/changelog/{{i18n.zone}}">{{ 'app.footer.change-log' | translate}}</a></div>
        <div><a routerLink="/docs/faq/{{i18n.zone}}">{{ 'app.footer.faq' | translate}}</a></div>
        <div><a href="//github.com/ng-alain/ng-alain/issues" target="_blank">{{ 'app.footer.issues' | translate}}</a></div>
        <div><a (click)="onCopy('316911865')">{{ 'app.footer.qqgroup' | translate}}</a></div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        Copyright &copy; 2019 <a href="//github.com/cipchk" target="_blank">&copy;卡色</a>
        <div style="margin-top: 20px;">
          <nz-popover [nzTrigger]="'click'" nzOverlayClassName="theme-color-content">
            <div class="theme-color" nz-popover>
              <div class="theme-color-value" [ngStyle]="{'background': color}"></div>
            </div>
            <ng-template #nzTemplate>
              <color-sketch [color]="color" (onChangeComplete)="changeColor($event)"></color-sketch>
            </ng-template>
          </nz-popover>
        </div>
      </div>
    </div>
  </div>
</div>
